<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">

<!-- Viewport Metatag -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<!-- Plugin Stylesheets first to ease overrides -->
<link rel="stylesheet" type="text/css" href="plugins/colorpicker/colorpicker.css" media="screen">
<link rel="stylesheet" type="text/css" href="custom-plugins/picklist/picklist.css" media="screen">
<link rel="stylesheet" type="text/css" href="plugins/select2/select2.css" media="screen">
<link rel="stylesheet" type="text/css" href="plugins/ibutton/jquery.ibutton.css" media="screen">
<link rel="stylesheet" type="text/css" href="plugins/cleditor/jquery.cleditor.css" media="screen">

<!-- Required Stylesheets -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/fonts/ptsans/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/fonts/icomoon/style.css" media="screen">

<link rel="stylesheet" type="text/css" href="css/mws-style.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/icons/icol16.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/icons/icol32.css" media="screen">

<!-- Demo Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/demo.css" media="screen">

<!-- jQuery-UI Stylesheet -->
<link rel="stylesheet" type="text/css" href="jui/css/jquery.ui.all.css" media="screen">
<link rel="stylesheet" type="text/css" href="jui/jquery-ui.custom.css" media="screen">

<!-- Theme Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/mws-theme.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/themer.css" media="screen">

<title>MWS Admin - Form Elements</title>

</head>

<body>

	<!-- Themer (Remove if not needed) -->  
	<div id="mws-themer">
        <div id="mws-themer-content">
        	<div id="mws-themer-ribbon"></div>
            <div id="mws-themer-toggle">
                <i class="icon-bended-arrow-left"></i> 
                <i class="icon-bended-arrow-right"></i>
            </div>
        	<div id="mws-theme-presets-container" class="mws-themer-section">
	        	<label for="mws-theme-presets">Color Presets</label>
            </div>
            <div class="mws-themer-separator"></div>
        	<div id="mws-theme-pattern-container" class="mws-themer-section">
	        	<label for="mws-theme-patterns">Background</label>
            </div>
            <div class="mws-themer-separator"></div>
            <div class="mws-themer-section">
                <ul>
                    <li class="clearfix"><span>Base Color</span> <div id="mws-base-cp" class="mws-cp-trigger"></div></li>
                    <li class="clearfix"><span>Highlight Color</span> <div id="mws-highlight-cp" class="mws-cp-trigger"></div></li>
                    <li class="clearfix"><span>Text Color</span> <div id="mws-text-cp" class="mws-cp-trigger"></div></li>
                    <li class="clearfix"><span>Text Glow Color</span> <div id="mws-textglow-cp" class="mws-cp-trigger"></div></li>
                    <li class="clearfix"><span>Text Glow Opacity</span> <div id="mws-textglow-op"></div></li>
                </ul>
            </div>
            <div class="mws-themer-separator"></div>
            <div class="mws-themer-section">
	            <button class="btn btn-danger small" id="mws-themer-getcss">Get CSS</button>
            </div>
        </div>
        <div id="mws-themer-css-dialog">
        	<form class="mws-form">
            	<div class="mws-form-row">
		        	<div class="mws-form-item">
                    	<textarea cols="auto" rows="auto" readonly="readonly"></textarea>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- Themer End -->

	<!-- Header -->
	<div id="mws-header" class="clearfix">
    
    	<!-- Logo Container -->
    	<div id="mws-logo-container">
        
        	<!-- Logo Wrapper, images put within this wrapper will always be vertically centered -->
        	<div id="mws-logo-wrap">
            	<img src="images/mws-logo.png" alt="mws admin">
			</div>
        </div>
        
        <!-- User Tools (notifications, logout, profile, change password) -->
        <div id="mws-user-tools" class="clearfix">
        
        	<!-- Notifications -->
        	<div id="mws-user-notif" class="mws-dropdown-menu">
            	<a href="#" data-toggle="dropdown" class="mws-dropdown-trigger"><i class="icon-exclamation-sign"></i></a>
                
                <!-- Unread notification count -->
                <span class="mws-dropdown-notif">35</span>
                
                <!-- Notifications dropdown -->
                <div class="mws-dropdown-box">
                	<div class="mws-dropdown-content">
                        <ul class="mws-notifications">
                        	<li class="read">
                            	<a href="#">
                                    <span class="message">
                                        Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                    </span>
                                    <span class="time">
                                        January 21, 2012
                                    </span>
                                </a>
                            </li>
                        	<li class="read">
                            	<a href="#">
                                    <span class="message">
                                        Lorem ipsum dolor sit amet
                                    </span>
                                    <span class="time">
                                        January 21, 2012
                                    </span>
                                </a>
                            </li>
                        	<li class="unread">
                            	<a href="#">
                                    <span class="message">
                                        Lorem ipsum dolor sit amet
                                    </span>
                                    <span class="time">
                                        January 21, 2012
                                    </span>
                                </a>
                            </li>
                        	<li class="unread">
                            	<a href="#">
                                    <span class="message">
                                        Lorem ipsum dolor sit amet
                                    </span>
                                    <span class="time">
                                        January 21, 2012
                                    </span>
                                </a>
                            </li>
                        </ul>
                        <div class="mws-dropdown-viewall">
	                        <a href="#">View All Notifications</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Messages -->
            <div id="mws-user-message" class="mws-dropdown-menu">
            	<a href="#" data-toggle="dropdown" class="mws-dropdown-trigger"><i class="icon-envelope"></i></a>
                
                <!-- Unred messages count -->
                <span class="mws-dropdown-notif">35</span>
                
                <!-- Messages dropdown -->
                <div class="mws-dropdown-box">
                	<div class="mws-dropdown-content">
                        <ul class="mws-messages">
                        	<li class="read">
                            	<a href="#">
                                    <span class="sender">John Doe</span>
                                    <span class="message">
                                        Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                    </span>
                                    <span class="time">
                                        January 21, 2012
                                    </span>
                                </a>
                            </li>
                        	<li class="read">
                            	<a href="#">
                                    <span class="sender">John Doe</span>
                                    <span class="message">
                                        Lorem ipsum dolor sit amet
                                    </span>
                                    <span class="time">
                                        January 21, 2012
                                    </span>
                                </a>
                            </li>
                        	<li class="unread">
                            	<a href="#">
                                    <span class="sender">John Doe</span>
                                    <span class="message">
                                        Lorem ipsum dolor sit amet
                                    </span>
                                    <span class="time">
                                        January 21, 2012
                                    </span>
                                </a>
                            </li>
                        	<li class="unread">
                            	<a href="#">
                                    <span class="sender">John Doe</span>
                                    <span class="message">
                                        Lorem ipsum dolor sit amet
                                    </span>
                                    <span class="time">
                                        January 21, 2012
                                    </span>
                                </a>
                            </li>
                        </ul>
                        <div class="mws-dropdown-viewall">
	                        <a href="#">View All Messages</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- User Information and functions section -->
            <div id="mws-user-info" class="mws-inset">
            
            	<!-- User Photo -->
            	<div id="mws-user-photo">
                	<img src="example/profile.jpg" alt="User Photo">
                </div>
                
                <!-- Username and Functions -->
                <div id="mws-user-functions">
                    <div id="mws-username">
                        Hello, John Doe
                    </div>
                    <ul>
                    	<li><a href="#">Profile</a></li>
                        <li><a href="#">Change Password</a></li>
                        <li><a href="index.html">Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Start Main Wrapper -->
    <div id="mws-wrapper">
    
    	<!-- Necessary markup, do not remove -->
		<div id="mws-sidebar-stitch"></div>
		<div id="mws-sidebar-bg"></div>
        
        <!-- Sidebar Wrapper -->
        <div id="mws-sidebar">
        
            <!-- Hidden Nav Collapse Button -->
            <div id="mws-nav-collapse">
                <span></span>
                <span></span>
                <span></span>
            </div>
            
        	<!-- Searchbox -->
        	<div id="mws-searchbox" class="mws-inset">
            	<form action="typography.html">
                	<input type="text" class="mws-search-input" placeholder="Search...">
                    <button type="submit" class="mws-search-submit"><i class="icon-search"></i></button>
                </form>
            </div>
            
            <!-- Main Navigation -->
            <div id="mws-navigation">
                <ul>
                    <li><a href="dashboard.html"><i class="icon-home"></i> Dashboard</a></li>
                    <li><a href="charts.html"><i class="icon-graph"></i> Charts</a></li>
                    <li><a href="calendar.html"><i class="icon-calendar"></i> Calendar</a></li>
                    <li><a href="files.html"><i class="icon-folder-closed"></i> File Manager</a></li>
                    <li><a href="table.html"><i class="icon-table"></i> Table</a></li>
                    <li class="active">
                        <a href="#"><i class="icon-list"></i> Forms</a>
                        <ul>
                            <li><a href="form_layouts.html">Layouts</a></li>
                            <li><a href="form_elements.html">Elements</a></li>
                            <li><a href="form_wizard.html">Wizard</a></li>
                        </ul>
                    </li>
                    <li><a href="widgets.html"><i class="icon-cogs"></i> Widgets</a></li>
                    <li><a href="typography.html"><i class="icon-font"></i> Typography</a></li>
                    <li><a href="grids.html"><i class="icon-th"></i> Grids &amp; Panels</a></li>
                    <li><a href="gallery.html"><i class="icon-pictures"></i> Gallery</a></li>
                    <li><a href="error.html"><i class="icon-warning-sign"></i> Error Page</a></li>
                    <li>
                        <a href="icons.html">
                            <i class="icon-pacman"></i> 
                            Icons <span class="mws-nav-tooltip">2000+</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- Main Container Start -->
        <div id="mws-container" class="clearfix">
        
        	<!-- Inner Container Start -->
            <div class="container">
            
            	<!-- Statistics Button Container -->
            	<div class="mws-stat-container clearfix">
                	
                    <!-- Statistic Item -->
                	<a class="mws-stat" href="#">
                    	<!-- Statistic Icon (edit to change icon) -->
                    	<span class="mws-stat-icon icol32-building"></span>
                        
                        <!-- Statistic Content -->
                        <span class="mws-stat-content">
                        	<span class="mws-stat-title">Floors Climbed</span>
                            <span class="mws-stat-value">324</span>
                        </span>
                    </a>

                	<a class="mws-stat" href="#">
                    	<!-- Statistic Icon (edit to change icon) -->
                    	<span class="mws-stat-icon icol32-sport"></span>
                        
                        <!-- Statistic Content -->
                        <span class="mws-stat-content">
                        	<span class="mws-stat-title">Calories Burned</span>
                            <span class="mws-stat-value down">74%</span>
                        </span>
                    </a>

                	<a class="mws-stat" href="#">
                    	<!-- Statistic Icon (edit to change icon) -->
                    	<span class="mws-stat-icon icol32-walk"></span>
                        
                        <!-- Statistic Content -->
                        <span class="mws-stat-content">
                        	<span class="mws-stat-title">Kilometers Walked</span>
                            <span class="mws-stat-value">14</span>
                        </span>
                    </a>
                    
                	<a class="mws-stat" href="#">
                    	<!-- Statistic Icon (edit to change icon) -->
                    	<span class="mws-stat-icon icol32-bug"></span>
                        
                        <!-- Statistic Content -->
                        <span class="mws-stat-content">
                        	<span class="mws-stat-title">Bugs Fixed</span>
                            <span class="mws-stat-value up">22%</span>
                        </span>
                    </a>
                    
                	<a class="mws-stat" href="#">
                    	<!-- Statistic Icon (edit to change icon) -->
                    	<span class="mws-stat-icon icol32-car"></span>

                        <!-- Statistic Content -->
                        <span class="mws-stat-content">
                        	<span class="mws-stat-title">Cars Repaired</span>
                            <span class="mws-stat-value">77</span>
                        </span>
                    </a>
                </div>
                
                <!-- Panels Start -->
                
            	<div class="mws-panel grid_8">
                	<div class="mws-panel-header">
                    	<span><i class="icon-pencil"></i> Text Inputs</span>
                    </div>
                    <div class="mws-panel-body no-padding">
                    	<form class="mws-form" action="form_elements.html">
                        	<div class="mws-form-inline">
                            	<div class="mws-form-row">
                                	<label class="mws-form-label">Text Field</label>
                                	<div class="mws-form-item">
                                    	<input type="text" class="large">
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label class="mws-form-label">Disabled Field</label>
                                	<div class="mws-form-item">
                                    	<input type="text" class="large" disabled="disabled">
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label class="mws-form-label">Read only Field</label>
                                	<div class="mws-form-item">
                                    	<input type="text" class="large" value="this is a readonly field" readonly="readonly">
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label class="mws-form-label">With Placeholder</label>
                                	<div class="mws-form-item">
                                    	<input type="text" class="large" placeholder="your placeholder text">
                                    </div>
                                </div>
                                <div class="mws-form-row">
                                    <label class="mws-form-label">Autocomplete</label>
                                    <div class="mws-form-item">
                                        <input type="text" class="large" class="mws-autocomplete">
                                    </div>
                                </div>
                                <div class="mws-form-row">
                                    <label class="mws-form-label">With Tooltip</label>
                                    <div class="mws-form-item">
                                        <input type="text" class="large" title="This is a tooltip" rel="tooltip" data-placement="left">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>    	
                </div>
                
            	<div class="grid_8">
                    <div class="mws-panel">
                    	<div class="mws-panel-header">
                        	<span><i class="icon-loading-2"></i> jQuery-UI Spinner</span>
                        </div>
                        <div class="mws-panel-body no-padding">
                        	<form class="mws-form" action="form_elements.html">
                            	<div class="mws-form-inline">
                                	<div class="mws-form-row">
                                    	<label class="mws-form-label">Default Spinner</label>
                                    	<div class="mws-form-item">
                                            <div class="small">
                                            	<input type="text" class="mws-spinner" value="32">
                                            </div>
                                        </div>
                                    </div>
                                	<div class="mws-form-row">
                                    	<label class="mws-form-label">Decimal Spinner</label>
                                    	<div class="mws-form-item">
                                            <div class="medium">
                                            	<input type="text" class="mws-spinner-decimal" value="3.52">
                                            </div>
                                        </div>
                                    </div>
                                	<div class="mws-form-row">
                                    	<label class="mws-form-label">Time Spinner</label>
                                    	<div class="mws-form-item">
                                            <div class="large">
                                            	<input type="text" class="mws-spinner-time" value="6:10 PM">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="mws-panel">
                        <div class="mws-panel-header">
                            <span><i class="icon-calculate"></i> Custom Inputs</span>
                        </div>
                        <div class="mws-panel-body no-padding">
                            <form class="mws-form" action="form_elements.html">
                                <div class="mws-form-inline">
                                	<div class="mws-form-row">
                                    	<label class="mws-form-label">Colorpicker</label>
                                    	<div class="mws-form-item">
                                        	<input type="text" class="mws-colorpicker large">
                                        </div>
                                    </div>
                                	<div class="mws-form-row">
                                    	<label class="mws-form-label">Styled File Input</label>
                                    	<div class="mws-form-item">
                                        	<input type="file">
                                        </div>
                                    </div>
                                    <div class="mws-form-row">
                                        <label class="mws-form-label">Checkbox Switches</label>
                                        <div class="mws-form-item">
                                            <ul class="mws-form-list inline">
                                                <li><input class="ibutton" type="checkbox"></li>
                                                <li><input class="ibutton" type="checkbox" data-label-on="Like" data-label-off="Dislike" checked="checked"></li>
                                                <li><input class="ibutton" type="checkbox" data-label-on="Yes, I'm in" data-label-off="No, I'm out"></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="mws-form-row">
                                        <label class="mws-form-label">Radio Switches</label>
                                        <div class="mws-form-item">
                                            <ul class="mws-form-list inline">
                                                <li><input name="rdo[]" class="ibutton" type="radio"></li>
                                                <li><input name="rdo[]" class="ibutton" type="radio" data-label-on="Like" data-label-off="Dislike" checked="checked"></li>
                                                <li><input name="rdo[]" class="ibutton" type="radio" data-label-on="Yes, I'm in" data-label-off="No, I'm out"></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="mws-form-row">
                                        <label class="mws-form-label">AutoSize Text Area</label>
                                        <div class="mws-form-item">
                                            <textarea rows="" cols="" class="large autosize"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>  
                </div>
                
            	<div class="grid_8">
                    <div class="mws-panel">
                        <div class="mws-panel-header">
                            <span>Select Inputs</span>
                        </div>
                        <div class="mws-panel-body no-padding">
                            <form class="mws-form" action="form_elements.html">
                                <div class="mws-form-inline">
                                    <div class="mws-form-row">
                                        <label class="mws-form-label">Select Input</label>
                                        <div class="mws-form-item">
                                            <select class="large">
                                                <option>Option 1</option>
                                                <option>Option 3</option>
                                                <option>Option 4</option>
                                                <option>Option 5</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="mws-form-row">
                                        <label class="mws-form-label">Multiple Select</label>
                                        <div class="mws-form-item">
                                            <select multiple="multiple" size="10" class="large">
                                                <option selected="selected">Option 1</option>
                                                <option>Option 2</option>
                                                <option>Option 3</option>
                                                <option>Option 4</option>
                                                <option>Option 5</option>
                                                <option>Option 6</option>
                                                <option selected="selected">Option 7</option>
                                                <option selected="selected">Option 8</option>
                                                <option>Option 9</option>
                                                <option>Option 10</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="mws-button-row">
                                    <input type="submit" value="Submit" class="btn btn-danger">
                                    <input type="reset" value="Reset" class="btn ">
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="mws-panel">
                        <div class="mws-panel-header">
                            <span>Advanced Select Inputs</span>
                        </div>
                        <div class="mws-panel-body no-padding">
                            <form class="mws-form" action="form_elements.html">
                                <div class="mws-form-inline">                                
                                    <div class="mws-form-row">
                                        <label class="mws-form-label">Default Select2 Select</label>
                                        <div class="mws-form-item">
                                            <select class="mws-select2 small">
                                                <option>Alabama</option>
                                                <option>Alaska</option>
                                                <option>Arizona</option>
                                                <option>Arkansas</option>
                                                <option>California</option>
                                                <option>Colorado</option>
                                                <option>Connecticut</option>
                                                <option>Delaware</option>
                                                <option>Florida</option>
                                                <option>Georgia</option>
                                                <option>Hawaii</option>
                                                <option>Idaho</option>
                                                <option>Illinois</option>
                                                <option>Indiana</option>
                                                <option>Iowa</option>
                                                <option>Kansas</option>
                                                <option>Kentucky</option>
                                                <option>Louisiana</option>
                                                <option>Maine</option>
                                                <option>Maryland</option>
                                                <option>Massachusetts</option>
                                                <option>Michigan</option>
                                                <option>Minnesota</option>
                                                <option>Mississippi</option>
                                                <option>Missouri</option>
                                                <option>Montana</option>
                                                <option>Nebraska</option>
                                                <option>Nevada</option>
                                                <option>New Hampshire</option>
                                                <option>New Jersey</option>
                                                <option>New Mexico</option>
                                                <option>New York</option>
                                                <option>North Dakota</option>
                                                <option>North Carolina</option>
                                                <option>Ohio</option>
                                                <option>Oklahoma</option>
                                                <option>Oregon</option>
                                                <option>Pennsylvania</option>
                                                <option>Rhode Island</option>
                                                <option>South Carolina</option>
                                                <option>South Dakota</option>
                                                <option>Tennessee</option>
                                                <option>Texas</option>
                                                <option>Utah</option>
                                                <option>Vermont</option>
                                                <option>Virginia</option>
                                                <option>Washington</option>
                                                <option>West Virginia</option>
                                                <option>Wisconsin</option>
                                                <option>Wyoming</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="mws-form-row">
                                        <label class="mws-form-label">Multiple Select2 Select</label>
                                        <div class="mws-form-item">
                                            <select class="mws-select2 medium" multiple size="5">
                                                <option>Alabama</option>
                                                <option>Alaska</option>
                                                <option>Arizona</option>
                                                <option>Arkansas</option>
                                                <option>California</option>
                                                <option>Colorado</option>
                                                <option>Connecticut</option>
                                                <option>Delaware</option>
                                                <option>Florida</option>
                                                <option>Georgia</option>
                                                <option>Hawaii</option>
                                                <option>Idaho</option>
                                                <option>Illinois</option>
                                                <option>Indiana</option>
                                                <option>Iowa</option>
                                                <option>Kansas</option>
                                                <option>Kentucky</option>
                                                <option>Louisiana</option>
                                                <option>Maine</option>
                                                <option>Maryland</option>
                                                <option>Massachusetts</option>
                                                <option>Michigan</option>
                                                <option>Minnesota</option>
                                                <option>Mississippi</option>
                                                <option>Missouri</option>
                                                <option>Montana</option>
                                                <option>Nebraska</option>
                                                <option>Nevada</option>
                                                <option>New Hampshire</option>
                                                <option>New Jersey</option>
                                                <option>New Mexico</option>
                                                <option>New York</option>
                                                <option>North Dakota</option>
                                                <option>North Carolina</option>
                                                <option>Ohio</option>
                                                <option>Oklahoma</option>
                                                <option>Oregon</option>
                                                <option>Pennsylvania</option>
                                                <option>Rhode Island</option>
                                                <option>South Carolina</option>
                                                <option>South Dakota</option>
                                                <option>Tennessee</option>
                                                <option>Texas</option>
                                                <option>Utah</option>
                                                <option>Vermont</option>
                                                <option>Virginia</option>
                                                <option>Washington</option>
                                                <option>West Virginia</option>
                                                <option>Wisconsin</option>
                                                <option>Wyoming</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="mws-form-row">
                                        <label class="mws-form-label">Grouped Select2 Select</label>
                                        <div class="mws-form-item">
                                            <select class="mws-select2 large" multiple size="5">
                                                <optgroup label="Alaskan/Hawaiian Time Zone">
                                                    <option value="AK">Alaska</option>
                                                    <option value="HI">Hawaii</option>
                                                </optgroup>
                                                <optgroup label="Pacific Time Zone">
                                                    <option value="CA">California</option>
                                                    <option value="NV">Nevada</option>
                                                    <option value="OR">Oregon</option>
                                                    <option value="WA">Washington</option>
                                                </optgroup>
                                                <optgroup label="Mountain Time Zone">
                                                    <option value="AZ">Arizona</option>
                                                    <option value="CO">Colorado</option>
                                                    <option value="ID">Idaho</option>
                                                    <option value="MT">Montana</option><option value="NE">Nebraska</option>
                                                    <option value="NM">New Mexico</option>
                                                    <option value="ND">North Dakota</option>
                                                    <option value="UT">Utah</option>
                                                    <option value="WY">Wyoming</option>
                                                </optgroup>
                                                <optgroup label="Central Time Zone">
                                                    <option value="AL">Alabama</option>
                                                    <option value="AR">Arkansas</option>
                                                    <option value="IL">Illinois</option>
                                                    <option value="IA">Iowa</option>
                                                    <option value="KS">Kansas</option>
                                                    <option value="KY">Kentucky</option>
                                                    <option value="LA">Louisiana</option>
                                                    <option value="MN">Minnesota</option>
                                                    <option value="MS">Mississippi</option>
                                                    <option value="MO">Missouri</option>
                                                    <option value="OK">Oklahoma</option>
                                                    <option value="SD">South Dakota</option>
                                                    <option value="TX">Texas</option>
                                                    <option value="TN">Tennessee</option>
                                                    <option value="WI">Wisconsin</option>
                                                </optgroup>
                                                <optgroup label="Eastern Time Zone">
                                                    <option value="CT">Connecticut</option>
                                                    <option value="DE">Delaware</option>
                                                    <option value="FL">Florida</option>
                                                    <option value="GA">Georgia</option>
                                                    <option value="IN">Indiana</option>
                                                    <option value="ME">Maine</option>
                                                    <option value="MD">Maryland</option>
                                                    <option value="MA">Massachusetts</option>
                                                    <option value="MI">Michigan</option>
                                                    <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
                                                    <option value="NY">New York</option>
                                                    <option value="NC">North Carolina</option>
                                                    <option value="OH">Ohio</option>
                                                    <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
                                                    <option value="VT">Vermont</option><option value="VA">Virginia</option>
                                                    <option value="WV">West Virginia</option>
                                                </optgroup>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="mws-form-row">
                                        <label class="mws-form-label">Pick List Plugin</label>
                                        <div class="mws-form-item">
                                            <select id="pickList" multiple="multiple" size="15">
                                                <option value="501649">2008-2009 "Mini" Baja</option>
                                                <option value="501497" selected="selected">AAPA - Asian American Psychological Association</option>
                                                <option value="501053">Academy of Film Geeks</option>
                                                <option value="500001">Accounting Association</option>
                                                <option value="501227">ACLU</option>
                                                <option value="501610">Active Minds</option>
                                                <option value="501514">Activism with A Reel Edge (A.W.A.R.E.)</option>
                                                <option value="501656">Adopt a Grandparent Program</option>
                                                <option value="501050">Africa Awareness Student Organization</option>
                                                <option value="501075">African Diasporic Cultural RC Interns</option>
                                                <option value="501493">Agape</option>
                                                <option value="501562" selected="selected">AGE-Alliance for Graduate Excellence</option>
                                                <option value="500676" selected="selected">AICHE (American Inst of Chemical Engineers)</option>
                                                <option value="501460">AIDS Sensitivity Awareness Project ASAP</option>
                                                <option value="500004">Aikido Club</option
                                                ><option value="500336">Akanke</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="mws-button-row">
                                    <input type="submit" value="Submit" class="btn btn-danger">
                                    <input type="reset" value="Reset" class="btn ">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                
            	<div class="mws-panel grid_8">
                	<div class="mws-panel-header">
                    	<span><i class="icon-pencil-2"></i> WYSIWYG Editor</span>
                    </div>
                    <div class="mws-panel-body no-padding">
                    	<form class="mws-form" action="form_elements.html">
                        	<div class="mws-form-row">
                            	<label class="mws-form-label">WYSIWYG</label>
                                <div class="mws-form-item">
                                	<textarea id="cleditor" class="large"></textarea>
                                </div>
                            </div>
                            <div class="mws-button-row">
                            	<input type="submit" value="Submit" class="btn btn-danger">
                            </div>
                        </form>
                    </div>
                </div>
                
            	<div class="mws-panel grid_8">
                	<div class="mws-panel-header">
                    	<span><i class="icon-ok"></i> Validation</span>
                    </div>
                    <div class="mws-panel-body no-padding">
                    	<form id="mws-validate" class="mws-form" action="form_elements.html">
                        	<div id="mws-validate-error" class="mws-form-message error" style="display:none;"></div>
                        	<div class="mws-form-inline">
                            	<div class="mws-form-row">
                                	<label class="mws-form-label">Required Validation</label>
                                	<div class="mws-form-item">
                                    	<input type="text" name="reqField" class="required large">
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label class="mws-form-label">Email Validation</label>
                                	<div class="mws-form-item">
                                    	<input type="text" name="emailField" class="required email large">
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label class="mws-form-label">URL Validation</label>
                                	<div class="mws-form-item">
                                    	<input type="text" name="urlField" class="required url large">
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label class="mws-form-label">Digit Validation</label>
                                	<div class="mws-form-item">
                                    	<input type="text" name="ageField" class="required digits large">
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label class="mws-form-label">Select Box Validation</label>
                                	<div class="mws-form-item">
                    					<select class="required large" name="selectBox">
                                        	<option></option>
                    						<option>Option 1</option>
                    						<option>Option 3</option>
                    						<option>Option 4</option>
                    						<option>Option 5</option>
                    					</select>
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label class="mws-form-label">File Input Validation</label>
                                	<div class="mws-form-item">
                                    	<input type="file" name="picture" class="required">
                                        <label for="picture" class="error" generated="true" style="display:none"></label>
                                    </div>
                                </div>
                            	<div class="mws-form-row">
                                	<label class="mws-form-label">Spinner Validation</label>
                                	<div class="mws-form-item">
                                        <input type="text" id="s4" name="spinner" class="required mws-spinner" value="10">
                                        <label for="s4" class="error" generated="true" style="display:none"></label>
                                    </div>
                                </div>
                    			<div class="mws-form-row">
                    				<label class="mws-form-label">Radiobutton Validation</label>
                    				<div class="mws-form-item">
                                    	<ul class="mws-form-list">
                                        	<li><input id="gender_male" type="radio" name="gender" class="required"> <label for="gender_male">Male</label></li>
                                        	<li><input id="gender_female" type="radio" name="gender"> <label for="gender_female">Female</label></li>
                                        </ul>
                                        <label for="gender" class="error plain" generated="true" style="display:none"></label>
                    				</div>
                    			</div>
                            </div>
                            <div class="mws-button-row">
                            	<input type="submit" class="btn btn-danger">
                            </div>
                        </form>
                    </div>    	
                </div>
                
                <!-- Panels End -->
            </div>
            <!-- Inner Container End -->
                       
            <!-- Footer -->
            <div id="mws-footer">
            	Copyright Your Website 2012. All Rights Reserved.
            </div>
            
        </div>
        <!-- Main Container End -->
        
    </div>

    <!-- JavaScript Plugins -->
    <script src="js/libs/jquery-1.8.3.min.js"></script>
    <script src="js/libs/jquery.mousewheel.min.js"></script>
    <script src="js/libs/jquery.placeholder.min.js"></script>
    <script src="custom-plugins/fileinput.js"></script>
    
    <!-- jQuery-UI Dependent Scripts -->
    <script src="jui/js/jquery-ui-1.9.2.min.js"></script>
    <script src="jui/jquery-ui.custom.min.js"></script>
    <script src="jui/js/jquery.ui.touch-punch.js"></script>

    <script src="jui/js/globalize/globalize.js"></script>
    <script src="jui/js/globalize/cultures/globalize.culture.en-US.js"></script>

    <!-- Plugin Scripts -->
    <script src="custom-plugins/picklist/picklist.min.js"></script>
    <script src="plugins/autosize/jquery.autosize.min.js"></script>
    <script src="plugins/select2/select2.min.js"></script>
    <script src="plugins/colorpicker/colorpicker-min.js"></script>
    <script src="plugins/validate/jquery.validate-min.js"></script>
    <script src="plugins/ibutton/jquery.ibutton.min.js"></script>
    <script src="plugins/cleditor/jquery.cleditor.min.js"></script>
    <script src="plugins/cleditor/jquery.cleditor.table.min.js"></script>
    <script src="plugins/cleditor/jquery.cleditor.xhtml.min.js"></script>
    <script src="plugins/cleditor/jquery.cleditor.icon.min.js"></script>

    <!-- Core Script -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/core/mws.js"></script>

    <!-- Themer Script (Remove if not needed) -->
    <script src="js/core/themer.js"></script>

    <!-- Demo Scripts (remove if not needed) -->
    <script src="js/demo/demo.formelements.js"></script>

</body>
</html>
